//I-MR图
<template>
  <el-card class="card">
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <div id="I-MR" class="myChart"></div>
  </el-card>
</template>

<style scoped>
  .card {
    padding: 0;
    line-height: 20px;
    text-align: left;
    border-radius: 10px;
  }

  .title {
    text-align: left;
    font-size: 20px;
    color: #676668;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  .myChart {
    width: 100%;
    height: 350px;
  }
</style>

<script>
  export default {
    props: {
      title: String
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let myChart = this.$echarts.init(document.getElementById('I-MR'));
        let X = [40, 43, 42, 40, 42, 41, 39, 41, 39, 41, 41, 43, 42, 41, 39, 41, 40, 39, 42, 39, 41, 39, 39, 39, 38];
        let R = [];
        //计算X[],R[]均值
        let X_mean = X[0], R_mean = 0;
        for (let i = 1; i < X.length; i++) {
          R.push(Math.abs(X[i] - X[i - 1]));
          X_mean += X[i];
          R_mean += Math.abs(X[i] - X[i - 1]);
        }
        X_mean /= X.length;
        R_mean /= R.length;
        //参数，控制上限，控制下限
        let E2 = 2.659, UCL = 0, LCL = 0;
        UCL = X_mean + E2 * R_mean;
        LCL = X_mean - E2 * R_mean;
        let option = {
          xAxis: {
            type: 'category',
          },
          yAxis: {
            min: 35,
            max: 45,
            interval:5,
            type: 'value',
          },
          series: [{
            data: X,
            type: 'line',
            lineStyle: {
              color: '#000'
            },
            markLine: {
              symbol: 'none',    //去掉标线后面的箭头
              data: [
                {
                  silent: false,    //响应和触发鼠标事件
                  lineStyle: {
                    type: 'dashed',   //线的类型
                    color: '#0000fa'    //线的颜色
                  },
                  yAxis: X_mean
                },
                {
                  silent: false,
                  lineStyle: {
                    type: 'solid',
                    color: '#ff0000'
                  },
                  yAxis: UCL
                },
                {
                  silent: false,
                  lineStyle: {
                    type: 'solid',
                    color: '#ff0000'
                  },
                  yAxis: LCL
                }
              ]
            }
          }]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

